<template>
  <ComDialog v-model="dialogVisible" title="新增">
    <ElementEasyForm ref="comFromRef" class="mt20" :formJson="formJson">


    </ElementEasyForm>
    <template #footer>
	<div >
			<el-button size="large" @click="handleClose">取消</el-button>
			<el-button size="large" :loading="subLoading" type="primary" @click="submitData">保存</el-button>
		</div>
    </template>
    	
  </ComDialog>
</template>

<script setup lang="tsx">
import { ref, reactive, defineEmits, onMounted, watch, shallowRef } from "vue";

const emit = defineEmits(["update:modelValue"]);
const dialogVisible = shallowRef(false);
const subLoading = shallowRef(false);
const comFromRef = ref<any>();

const submitData =async ()=>{
try {
	const res = await comFromRef.value.validate();
	console.log('res :>> ', res);
} catch (error) {
	console.log('error :>> ', error);
 
}
}
const state = reactive({});
const formJson = ref<any>({
  "rowAttrs": {
    "gutter": 0,
    "justify": "start",
    "align": "middle"
  },
  "schema":[
  {
    "label": "公司名字",
    "prop": "companyName",
    "componentName": "el-input",
    "formItemAttrs": {},
    "attrs": {
      "placeholder": "请输入公司名称"
    },
    "colAttrs": {
      "span": 12
    }
  },
  {
    "label": "公司地址",
    "prop": "companyAddress",
    "componentName": "el-input",
    "formItemAttrs": {},
    "attrs": {
      "placeholder": "请输入公司地址"
    },
    "colAttrs": {
      "span": 12
    }
  },
  {
    "label": "公司电话",
    "prop": "companyPhone",
    "componentName": "el-input",
    "formItemAttrs": {},
    "attrs": {
      "placeholder": "请输入公司电话"
    },
    "colAttrs": {
      "span": 12
    }
  },
  {
    "label": "公司等级",
    "prop": "companyLevel",
    "componentName": "el-radio-group",
    "formItemAttrs": {},
    "attrs": {},
    "colAttrs": {
      "span": 12
    },
    "children": [
      {
        "componentName": "el-radio",
        "attrs": {
          "label": "A"
        },
        "children": ["A"]
      },
      {
        "componentName": "el-radio",
        "attrs": {
          "label": "B"
        },
        "children": ["B"]
      },
      {
        "componentName": "el-radio",
        "attrs": {
          "label": "C"
        },
        "children": ["C"]
      },
      {
        "componentName": "el-radio",
        "attrs": {
          "label": "D"
        },
        "children": ["D"]
      }
    ]
  },
  {
    "label": "公司照片",
    "prop": "companyLogo",
    "componentName": "el-upload",
    "formItemAttrs": {},
    "attrs": {
      "action": "/api/upload",
      "limit": 1,
      "list-type": "picture-card"
    },
    "events": {
      "success": "handleUploadSuccess",
      "remove": "handleUploadRemove"
    },
    "colAttrs": {
      "span": 12
    }
  },
  {
    "label": "公司股东",
    "prop": "shareholders",
    "componentName": "custom-shareholder-list", // 假设这是一个自定义组件
    "formItemAttrs": {},
    "colAttrs": {
      "span": 24
    },
  }
],
  "model": {
    "CarolKarenThompson": "",
    "BrianAmyAnderson": ""
  },
  "formAttrs": {
    "hide-required-asterisk": false,
    "inline-message": false,
    "status-icon": false,
    labelWidth: "100px",
    "scroll-to-error": false
  }
});
let props: any = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});

watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val;
  },
  {
    immediate: true,
  }
);
const handleClose = () => {
  emit("update:modelValue", false);
};
watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) {
      handleClose();
    }
  }
);
</script>

<style scoped lang="scss"></style>
